<template>
	<view class="appeal">
		<!-- 申诉页面 -->
		<view class="appeal-box">
			<view class="label">申诉信息</view>
			<view class="appeal-flex" v-for="(item,i) in options[itemData.itemCode]">
				<view class="name">{{item.label}}</view>
				<view class="text">{{item.format?item.format(itemData):itemData[item.prop]}}</view>
			</view>
			<view class="appeal-flex">
				<view class="name">申诉描述</view>
			</view>
			<view class="appeal-flex">
				<textarea class="textarea" v-model="appealForm.desc" placeholder="输入申诉描述"></textarea>
			</view>
			<view class="appeal-flex">
				<view class="name">附件</view>
			</view>
			<view class="appeal-flex">
				<view class="file-list clearfix">
					<view class="file-item" v-for="(item,index) in appealForm.fileList">
						<image class="file-img" :src="item.temp" mode="aspectFit"></image>
						<view class="file-del" @click="fileDel(index)"></view>
					</view>
					<view class="file-item file-upload-btn" @click="selectFile"></view>
				</view>
			</view>
			<div class="appeal-btn" @click="handleSubmit">提交</div>
		</view>
	</view>
</template>

<script>
	import {
		dateFormat
	} from "@/common/util.js"
	export default {
		data() {
			return {
				itemData: {
					vehCode: '',
					vehColor: '',
					occurAddr: '',
					indicatorItem: '',
					indicatorDesc: '',
					evalTime: '',
				},
				appealForm: {
					desc: "",
					fileList: []
				},
				options: {
					pljs: [{
						label: '车牌号码(颜色)',
						format: (item) => {
							let res = item.vehCode;
							if (item.vehColor) {
								res += '(' + item.vehColor + ')'
							}
							return res;
						},
					}, {
						label: '申诉项',
						prop: 'indicatorItem',
					}, {
						label: '发生地点',
						prop: 'occurAddr',
					}, {
						label: '发生时间',
						prop: 'evalTime',
					}],
					ybcs: [{
						label: '车牌号码(颜色)',
						format: (item) => {
							let res = item.vehCode;
							if (item.vehColor) {
								res += '(' + item.vehColor + ')'
							}
							return res;
						},
					}, {
						label: '申诉项',
						prop: 'indicatorItem',
					}, {
						label: '超速地点',
						prop: 'occurAddr',
					}, {
						label: '超速时间',
						prop: 'evalTime',
					}],
					ydztczbgf: [{
						label: '运单号',
						prop: 'billNo',
					}, {
						label: '申诉项',
						prop: 'indicatorItem',
					}, {
						label: '发生时间',
						prop: 'evalTime'
					}, {
						label: '描述',
						prop: 'description'
					}],
					jjwfsjkf: [{
						label: '申诉项',
						prop: 'indicatorItem',
					}, {
						label: '发生时间',
						prop: 'evalTime'
					}, {
						label: '案由',
						prop: 'cause'
					}],
					yzcf: [{
						label: '车牌号码(颜色)',
						format: (item) => {
							let res = item.vehCode;
							if (item.vehColor) {
								res += '(' + item.vehColor + ')'
							}
							return res;
						},
					}, {
						label: '申诉项',
						prop: 'indicatorItem',
					}, {
						label: '发生时间',
						prop: 'evalTime'
					}, {
						label: '案由',
						prop: 'cause'
					}],
				},
			}
		},
		computed: {
			userInfo() {
				return this.$store.getters.getUserInfo;
			}
		},
		methods: {
			// 申诉期限
			durationAppeal(datetime) {
				const d = new Date(datetime);
				d.setDate(d.getDate() + 7)
				return dateFormat(d);
			},
			// 点击选择图片
			selectFile() {
				if (this.appealForm.fileList.length == 9) {
					uni.showToast({
						title: "最多上传9个",
						icon: 'none'
					})
					return;
				}
				uni.chooseImage({
					count: 9 - this.appealForm.fileList.length,
					success: (chooseImageRes) => {
						// console.log(chooseImageRes)
						uni.uploadFile({
							url: 'data-inspection-study/insp_file/upload',
							filePath: chooseImageRes.tempFilePaths[0],
							name: 'file',
							success: (uploadFileRes) => {
								const resData = uploadFileRes.data ? JSON.parse(uploadFileRes
									.data) : ''
								if (resData && resData.code == 200) {
									// console.log(resData.data)
									this.appealForm.fileList.push({
										upload: resData.data.url,
										temp: chooseImageRes.tempFilePaths[0],
										...resData.data,
									})
								} else {
									uni.showToast({
										title: "APP版本：" + this.$store.getters.AppVersion + "\r\n错误信息：" + (resData.msg || '网络状况不佳，请稍后再试'),
										icon: 'none'
									})
								}
							}
						});
					}
				});
			},
			// 删除已上传的图片
			fileDel(index) {
				this.appealForm.fileList.splice(index, 1)
			},
			// 提交
			handleSubmit() {
				const param = {
					archiveDetailId: this.itemData.archiveDetailId,
					evalSection: this.itemData.evalSection,
					originIds: this.itemData.originIds,
					deductPoint: this.itemData.deductPoint,
					appealDesc: this.appealForm.desc,
					files: this.appealForm.fileList.map(item => {
						return {
							id: item.id,
							name: item.name,
							url: item.url,
						}
					})
				}
				this.$api.staffAppealAudit(param).then((res) => {
					uni.showToast({
						title: '已提交',
						icon: "none",
						success() {
							setTimeout(() => {
								let pages = getCurrentPages(); // 当前页面        
								let beforePage = pages[pages.length - 2]; // 2：上一页 
								uni.navigateBack({
									success: () => {
										beforePage.$vm.initData();
									}
								});
							}, 1500); // showToast默认时间
						}
					});
				})
			}
		},
		onLoad(e) {
			if (e.params) {
				Object.assign(this.itemData, JSON.parse(e.params))
			}
			console.log(this.itemData);
		}
	}
</script>

<style lang="scss" scoped>
	.appeal {
		padding: 30rpx;

		.appeal-box {
			background: #FFFFFF;
			box-shadow: 0px 4rpx 6rpx 1px rgba(84, 83, 83, 0.16);
			border-radius: 16rpx;
			padding: 24rpx 30rpx;

			.label {
				font-size: 28rpx;
				color: #333;
				font-weight: bold;
			}

			.appeal-flex {
				display: flex;
				font-size: 26rpx;
				margin-top: 26rpx;
				line-height: 36rpx;
				align-items: flex-start;

				.name {
					width: 7em;
					color: #666;
				}

				.text {
					flex: 1;
					color: #333;
					word-break: break-all;
				}
			}

			.textarea {
				width: 100%;
				background: #F2F2F2;
				border-radius: 8rpx;
				font-size: 26rpx;
				padding: 0.5em;
				line-height: 1.5em;
				height: 6em;
			}

			.appeal-btn {
				line-height: 88rpx;
				background: #FFD14A;
				border-radius: 23rpx;
				font-size: 28rpx;
				color: #fff;
				text-align: center;
				margin: 80rpx 0 20rpx
			}
		}

		.file-list {
			flex: 1;

			.file-item {
				float: left;
				width: 22%;
				text-align: center;
				height: 140rpx;
				line-height: 140rpx;
				margin-right: 4%;
				margin-bottom: 2%;
				position: relative;

				.file-img {
					max-width: 100%;
					max-height: 100%;
					vertical-align: middle;
				}

				.file-del {
					position: absolute;
					right: 0;
					top: 0;
					transform: translate(30%, -30%);
					border-radius: 50%;
					width: 0;
					height: 0;
					border: 20rpx solid #f00;

					&::after {
						content: "";
						width: 20rpx;
						display: block;
						transform: translate(-50%, -50%);
						background-color: #ffffff;
						height: 4rpx;
					}
				}

				&:nth-child(4n) {
					margin-right: 0;
				}

				&:nth-child(n+5) {
					margin-top: calc(4% / 3);
				}

			}

			.file-upload-btn {
				box-sizing: border-box;
				border: 1rpx solid #ddd;
				background: url('@/static/image/camera.png') no-repeat center;
				background-size: 70%;
			}
		}
	}
</style>